<template>
	<view @click="close" class="mask">
		<view @click.stop="onClick" class="content">
			<view class="title" :style="{ 'color': titleTextColor }">{{ titleText }}</view>
			<view class="text" :style="{ 'color': contentTextColor }">{{ contentText }}</view>
			<view class="btn">
				<button class="close" @click="close" :style="{ 'color': closeColor }">{{ closeText }}</button>
				<button class="confirm" @click.stop="confirm" :style="{ 'color': confirmColor }">{{ confirmText }}</button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {};
	},
	computed: {
		titleText() {
			return this.$store.getters.customPopup.titleText;
		},
		titleTextColor() {
			return this.$store.getters.customPopup.titleTextColor;
		},
		contentText() {
			return this.$store.getters.customPopup.contentText;
		},
		contentTextColor() {
			return this.$store.getters.customPopup.contentTextColor;
		},
		closeText() {
			return this.$store.getters.customPopup.closeText;
		},
		closeColor() {
			return this.$store.getters.customPopup.closeColor;
		},
		confirmText() {
			return this.$store.getters.customPopup.confirmText;
		},
		confirmColor() {
			return this.$store.getters.customPopup.confirmColor;
		},
		maskShow() {
			return this.$store.getters.customPopup.maskShow;
		},
		url() {
			return this.$store.getters.customPopup.url;
		}
	},
	onshow() {
		this.$store.dispatch('popup/setCache', 1);
	},
	methods: {
		onClick(e) {
			//   uni.showToast({
			//     title: "点击蒙层关闭",
			//   });
			// #ifdef APP-NVUE
			e.stopPropagation();
			// #endif
		},
		close() {
			let _customPopup = this.$store.getters.customPopup;
			uni.navigateBack();
			if (_customPopup.cancel) {
				_customPopup.cancel();
			}
			uni.navigateBack();
		},
		confirm(e) {
			uni.navigateBack();
			let _customPopup = this.$store.getters.customPopup;
			if (_customPopup.confirm) {
				_customPopup.confirm();
			}
			if(this.url){
				uni.navigateTo({
					url:this.url
				})
			}
		}
	}
};
</script>

<style>
page {
	background: transparent;
}

.mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
}

.content {
	/* #ifndef APP-NVUE */
	position: relative;
	overflow: hidden;
	/* #endif */
	width: 200px;
	height: 120px;
	background-color: #ffffff;
	border-radius: 20rpx;
}
.title {
	/* height: 40rpx;
  line-height: 40rpx; */
	margin-top: 30rpx;
	width: 100%;
	text-align: center;
}
.text {
	/* #ifndef APP-NVUE */
	/* display: block; */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/* #endif */
	width: 90%;
	margin: 0 auto;
	line-height: 50px;
	text-align: center;
	color: #000;
}
.btn {
	width: 100%;
	/* #ifndef APP-NVUE */
	position: absolute;
	bottom: 0;
	display: flex;
	/* #endif */
	border-top: 1px solid #f5f7f9;
}
.close {
	/* #ifndef APP-NVUE */
	flex: 1;
	/* #endif */
	background-color: #fff;
	font-size: 28rpx;
	text-align: center;
	border-right: 1px solid #f5f7f9;
}
.confirm {
	/* #ifndef APP-NVUE */
	flex: 1;
	/* #endif */
	background-color: #fff;
	font-size: 28rpx;
	text-align: center;
}
button::after {
	border: none;
}
</style>
